
<template>
    <div id="app">
        <body id="poster">
        <el-form :model="user" class="login-container" status-icon label-position="left" label-width="0px" ref="ruleForm" :rules="rules">
            <h3 class="login_title">系统登录</h3>
            <el-form-item  prop="userName">
                <el-input type="text" v-model="user.userName" auto-complete="off" placeholder="请设置用户名" name="userName" id="userName"></el-input>
            </el-form-item>
            <el-form-item  prop="userPwd">
                <el-input type="password" v-model="user.userPwd" auto-complete="off" placeholder="密码" name="userPwd" id="userPwd"></el-input>
            </el-form-item>
            <el-form-item>
            <slide-verify
                    w="275"
                    ref="slideblock"
                    @again="onAgain"
                    @fulfilled="onFulfilled"
                    @success="onSuccess"
                    @fail="onFail"
                    @refresh="onRefresh"
                    :accuracy="accuracy"
                    :slider-text="text"
            ></slide-verify>
            <div style="color: black">{{msg}}</div>
            </el-form-item>
            <el-checkbox v-model="isChecked" icon-size="16px" checked-color="#4188F2" shape="square" style="top: -15px">记住密码</el-checkbox>
            <el-form-item style="width: 100%">
                <el-button type="primary" style="width: 26%;background: #505458;border: none"  @click="deng()">登录</el-button>
                    <el-button type="primary" style="width: 26%;background: #505458;border: none" @click="gotolink">
                        注册
                    </el-button>
                <el-button type="primary" style="width: 40%;background: #505458;border: none;text-align: center" v-on:click="login">管理员登录</el-button>
            </el-form-item>
        </el-form>
        </body>
    </div>
</template>
<script>
    import denglu from '../api/denglu'
    export default {
        created() {
  console.log("欢迎来到登录页面")
            //-- 生命周期方法，页面渲染之前执行。
            this.getCookie();
        },
        name: "Login",
        data() {
            return {
                yanzheng:false,
                msg: '',
                text: '向右滑',
                // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
                accuracy: 1,
                user: {
                    userName: '',
                    userPwd: '',
                },
                rules: {
                    userName:[
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 2, max: 12, message: '长度在 2 到 12 个字符', trigger: 'blur'},
                        {pattern: /^[\u4E00-\u9FA5]+$/, message: '用户名只能为中文'}
                    ],
                    userPwd:[
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 5, max: 12, message: '长度在 5 到 5 个字符', trigger: 'blur'},
                        {pattern: /^(\w){5,25}$/, message: '只能输入5-25个字母、数字、下划线'}
                    ],
                },
                // responseResult: [],
                isChecked: true,
            }
        },
        methods: {
            gotolink(){

                //点击跳转至上次浏览页面
                // this.$router.go(-1)

                //指定跳转地址
                this.$router.replace('/zhuce')
            },
            deng() {
                if(!(this.msg==="验证成功")){
                    alert("请补全图片验证码");
                    return
                }
                denglu.chaxun(this.user).then(
                    response => {
                        if(response.data.code===20000){
                            alert(response.data.msg);
                            this.submitForm();
                            console.log(response)
                            localStorage.setItem('Authorization',JSON.stringify(response.data.data.user));
                            // JSON.parse(localStorage.getItem("Authorization"));
                            this.$router.replace('/')
                            window.location.reload();
                        }else {
                            alert(response.data.msg)
                            return ;
                        }
                    })
            },
            //读取cookie
            getCookie: function() {
                if (document.cookie.length > 0) {
                    var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
                    for (var i = 0; i < arr.length; i++) {
                        var arr2 = arr[i].split('='); //再次切割
                        //判断查找相对应的值
                        if (arr2[0] === 'userName') {
                            this.user.userName = arr2[1] //保存到保存数据的地方
                        } else if (arr2[0] === 'userPwd') {
                            this.user.userPwd = arr2[1]
                        }
                    }
                }
            },
            submitForm() {
                const self = this;
                //判断复选框是否被勾选 勾选则调用配置cookie方法
                if (self.isChecked === true) {
                    //传入账号名，密码，和保存天数3个参数
                    self.setCookie(self.user.userName, self.user.userPwd, 1);
                }else {
                    console.log("清空Cookie");
                    //清空Cookie
                    self.clearCookie();
                }
            },
            //清除cookie
            clearCookie: function() {
                this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
            },
            setCookie(c_name, c_pwd, exdays) {
                var exdate = new Date(); //获取时间
                exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
                //字符串拼接cookie
                window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
                window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
            },
            onSuccess(){
                console.log('验证成功');
                this.msg="验证成功"
            },
            onFail(){
                console.log('验证不通过');
                this.msg = ''
            },
            onRefresh(){
                console.log('点击了刷新小图标');
                this.msg = ''
            },
            onFulfilled() {
                console.log('刷新成功啦！');

            },
            onAgain() {
                console.log('检测到非人为操作的哦！');
                this.msg = 'try again';
                // 刷新
                this.$refs.slideblock.reset();
            },
            handleClick() {
                // 父组件直接可以调用刷新方法
                this.$refs.slideblock.reset();
            },

        }
    }
</script>



<style  scoped>
    #poster {
        background:url("../assets/backgroud/bk2.jpg") no-repeat;
        background-position: center;
        height: 100%;
        width: 100%;
        background-size: cover;
        position: fixed;
    }
    body{
        margin: 0;
        padding: 0;
    }

    .login-container {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 90px auto;
        width: 350px;
        padding: 35px 35px 35px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    .login_title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
    }

</style>